<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>消费评价</title>
    <script src="js/alert.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("img/bj-1.png");
            background-size: 100% 165%;
            background-repeat: no-repeat;
        }

        #bottom {
            background-color: #F44336;
            position: absolute;
            width: 78%;
            height: 6%;
            margin: 30px 0 0 10%;
            border-radius: 10px;
            font-size: 20px;
            color: aliceblue;
            outline: none;
            border: 0;
            text-align: center;
            line-height: 2;
        }

    </style>
    <link rel="stylesheet" href="css/xp.css">
</head>
<body>
<div style="margin: 10% 8%;font-size:20px">
    请对本次服务做出评价:
</div>
<div style="margin: 8% 8%;">

    <div style="width: 100%;display: flex;margin-bottom: 8%;margin-left: 5%;">
        <div style="font-size: 17px;float: left;padding-top: 3px;margin-right: 25px;">购物环境:</div>
        <div id="c1" data-num="0" class="clearfix starttwo" style="display: inline-block;float: left;">
            <div class="star_score"></div>
        </div>
    </div>

    <div style="width: 100%;display: flex;margin-bottom: 8%;margin-left: 5%;">
        <div style="font-size: 17px;float: left;padding-top: 3px;margin-right: 25px;">是否推荐:</div>
        <div id="c2" data-num="0" class="clearfix starttwo" style="display: inline-block;float: left;">
            <div class="star_score"></div>
        </div>
    </div>

    <div style="width: 100%;display: flex;margin-bottom: 8%;margin-left: 5%;">
        <div style="font-size: 17px;float: left;padding-top: 3px;margin-right: 25px;">服务水平:
        </div>
        <div id="c3" data-num="0" class="clearfix starttwo" style="display: inline-block;float: left;">
            <div class="star_score"></div>
        </div>
    </div>

    <div style="width: 100%;display: flex;margin-bottom: 8%;margin-left: 5%;">
        <div style="font-size: 17px;float: left;padding-top: 3px;margin-right: 25px;">产品质量:</div>
        <div id="c4" data-num="0" class="clearfix starttwo" style="display: inline-block;float: left;">
            <div class="star_score"></div>
        </div>
    </div>

    <div style="margin-top: 15%;margin-left: 4%">
        <div style="font-size: 19px;margin-bottom: 2%;border-radius: 7px;">问题反馈:</div>
        <textarea id="txt" rows="4" cols="20"
                  style="width: 90%;border-radius: 7px;font-size: 20px;padding: 2%;"></textarea>
    </div>

</div>
<div>
    <a id="bottom" onclick="sub()">提交</a>
</div>

</body>
<script src="js/jquery.min.js"></script>
<script>
    (function ($) {
        $.getUrlParam1 = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return decodeURI(r[2]);
            return null;
        }
    })(jQuery);
</script>
<script>

    function sub() {
        var rcode = $.getUrlParam1("code");
        var icode = $.getUrlParam1("phone");
        var account = $.getUrlParam1("account");
        var score1 = $("#c1").attr("data-num");
        var score2 = $("#c2").attr("data-num");
        var score3 = $("#c3").attr("data-num");
        var score4 = $("#c4").attr("data-num");
        var description = $("#txt").val();

        $.ajax({
            "url": "/messageTemplate/reviews/",
            "data": "rcode=" + rcode + "&icode=" + icode + "&score1=" + score1 + "&score2=" + score2 +
                "&score3=" + score3 + "&score4=" + score4 + "&description=" + description + "&account=" + account,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 200) {
                    location.href = "reviews-ok.html";
                } else {
                    alert(json.message)
                }
            }
        })

    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var rcode = $.getUrlParam1("code");

        var account = $.getUrlParam1("account");
        $.ajax({
            "url": "/messageTemplate/repetition/",
            "data": "rcode=" + rcode + "&account=" + account,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                if (json.state != 200) {
                    location.href = "reviews-ok.html";
                }
            }
        })
    });


    function scoreFun(object, opts) {
        var defaults = {
            fen_d: 16,
            ScoreGrade: 10,
            nameScore: "fenshu",
            parent: "star_score",
            attitude: "attitude"
        };
        var options = $.extend({}, defaults, opts);
        var countScore = object.find("." + options.nameScore);
        var startParent = object.find("." + options.parent);
        var now_cli;
        var fen_d = options.fen_d;
        var len = options.ScoreGrade;
        startParent.width(fen_d * len);
        var preA = (5 / len);
        for (var i = 0; i < len; i++) {
            var newSpan = $("<a href='javascript:void(0)'></a>");
            newSpan.css({"left": 0, "width": fen_d * (i + 1), "z-index": len - i});
            newSpan.appendTo(startParent)
        }
        startParent.find("a").each(function (index, element) {
            $(this).click(function () {
                now_cli = index;
                $(this).parent().parent().attr("data-num", index + 1);
                show(index, $(this));


            });
            $(this).mouseenter(function () {
                show(index, $(this));
            });
            $(this).mouseleave(function () {
                if (now_cli >= 0) {
                    var scor = preA * (parseInt(now_cli) + 1);
                    startParent.find("a").removeClass("clibg");
                    startParent.find("a").eq(now_cli).addClass("clibg");
                    var ww = fen_d * (parseInt(now_cli) + 1);
                    startParent.find("a").eq(now_cli).css({"width": ww, "left": "0"});
                    if (countScore) {
                        countScore.text(scor);
                    }
                } else {
                    startParent.find("a").removeClass("clibg");
                    if (countScore) {
                        countScore.text("");
                    }
                }
            })
        });

        function show(num, obj) {
            var n = parseInt(num) + 1;

            var ww = fen_d * n;
            var scor = preA * n;
            object.find("a").removeClass("clibg");
            obj.addClass("clibg");
            obj.css({"width": ww, "left": "0"});
            countScore.text(scor);
        }
    }
</script>
<script>
    scoreFun($("#startone"));
    scoreFun($("#c1"), {
        fen_d: 22,//每一个a的宽度
        ScoreGrade: 5//a的个数 10或者
    });

    scoreFun($("#c2"), {
        fen_d: 22,//每一个a的宽度
        ScoreGrade: 5//a的个数 10或者
    });
    scoreFun($("#c3"), {
        fen_d: 22,//每一个a的宽度
        ScoreGrade: 5//a的个数 10或者
    });
    scoreFun($("#c4"), {
        fen_d: 22,//每一个a的宽度
        ScoreGrade: 5//a的个数 10或者
    });
</script>
</html>